<template>
    <div>
        <!--固井施工 -->
        <div>
            <el-card style="height: 100%" class="card">
                <div slot="header">
                    <span>施工参数</span>
                </div>

                <!--施工结果 -->
                <el-row class="dataform">
                    <div class="headstyle">施工结果</div>

                    <el-form ref="findform1" :model="findform1" label-width="100px">
                        <el-row>
                            <el-form-item label="施工连续性">
                                <el-select v-model="findform1.continuous" placeholder="选择施工连续性">
                                    <el-option v-for="item in Continuous_Select" :label="item" :key="item" :value="item"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item label="施工过程井漏情况">
                                <el-input
                                    type="textarea"
                                    style="width: 87%"
                                    :rows="5"
                                    placeholder="输入施工过程井漏情况"
                                    v-model="findform1.leakage"
                                >
                                </el-input>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item label="碰压情况">
                                <el-input
                                    type="textarea"
                                    style="width: 87%"
                                    :rows="5"
                                    placeholder="输入碰压情况"
                                    v-model="findform1.bumppressure"
                                >
                                </el-input>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item label="改善措施">
                                <el-input
                                    type="textarea"
                                    style="width: 87%"
                                    :rows="5"
                                    placeholder="输入改善措施"
                                    v-model="findform1.remedy"
                                >
                                </el-input>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-col :span="6" style="float: right">
                                <el-form-item>
                                    <el-button type="primary" @click="formSave1">保存</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>

                <!--实际施工参数 -->
                <el-row class="dataform">
                    <div class="headstyle">实际施工参数</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="addone1">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportWorkFLowReal" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="download1">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData1"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteone1(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="orderNumber" width="50" label="顺序" />
                        <el-table-column align="center" prop="content" width="200" label="操作内容" />
                        <el-table-column align="center" prop="workvol" label="工作量(m^3)" />
                        <el-table-column align="center" prop="density" label="密度(g/cm^3)" />
                        <el-table-column align="center" prop="displacement1" label="最低排量 (m^3/min)" />
                        <el-table-column align="center" prop="displacement2" label="最高排量 (m^3/min)" />
                        <el-table-column align="center" prop="pressure" label="压力 (mpa)" />
                        <el-table-column align="center" prop="worktime" label="施工时间 (min)" />
                        <el-table-column align="center" prop="totaltime" label="累计时间 (min)" />
                        <el-table-column align="center" prop="totalinjection" label="累计注替量 (m^3)" />
                    </el-table>
                </el-row>

                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx1"
                        :page-size="pageSizes1"
                        :total="totalData1"
                        @current-change="handlePageChange1"
                    ></el-pagination>
                </div>
                <!--实际施工参数--编辑弹出框 -->

                <el-dialog title="实际施工参数数据" :visible.sync="editVisible1" width="60%">
                    <el-form :model="form1" ref="form1" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="顺序">
                                <el-input v-model="form1.orderNumber"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="操作内容">
                                <el-input v-model="form1.content"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工作量(m^3)">
                                <el-input v-model="form1.workvol"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="密度(g/cm^3)">
                                <el-input v-model="form1.density"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最低排量 (m^3/min)">
                                <el-input v-model="form1.displacement1"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="最高排量 (m^3/min)">
                                <el-input v-model="form1.displacement2"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="压力 (mpa)">
                                <el-input v-model="form1.pressure"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="施工时间 (min)">
                                <el-input v-model="form1.worktime"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="累计时间 (min)">
                                <el-input v-model="form1.totaltime"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="累计注替量 (m^3)">
                                <el-input v-model="form1.totalinjection"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="saveadd1" v-if="isNewData1">确 定</el-button>
                        <el-button type="primary" @click="saveEdit1" v-else>确 定</el-button>
                    </span>
                </el-dialog>

                <!--水泥浆 -->
                <el-row class="dataform">
                    <div class="headstyle">水泥浆</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="addone2">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportCementSluryReal" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="download2">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData2"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteone2(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="cementcategory" label="水泥类别" />
                        <el-table-column align="center" prop="cementsection" label="封隔井段" />
                        <el-table-column align="center" prop="density" label="密度(g/cm^3)" />
                        <el-table-column align="center" prop="solidtime" label="稠化时间(min)" />
                        <el-table-column align="center" prop="temptime" label="稠化过渡时间(min)" />
                        <el-table-column align="center" prop="antifouling" label="抗污染性能" />
                    </el-table>
                </el-row>

                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx2"
                        :page-size="pageSizes2"
                        :total="totalData2"
                        @current-change="handlePageChange2"
                    ></el-pagination>
                </div>
                <!--水泥浆--编辑弹出框 -->

                <el-dialog title="水泥浆数据" :visible.sync="editVisible2" width="60%">
                    <el-form :model="form2" ref="form2" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="水泥类别">
                                <el-select v-model="form2.cementcategory" placeholder="选择水泥类别">
                                    <el-option v-for="item in cementcategory_Select" :label="item" :key="item" :value="item"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="封隔井段">
                                <el-input v-model="form2.cementsection"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密度(g/cm^3)">
                                <el-input v-model="form2.density"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="稠化时间(min)">
                                <el-input v-model="form2.solidtime"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="稠化过渡时间(min)">
                                <el-input v-model="form2.temptime"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="抗污染性能">
                                <el-input v-model="form2.antifouling"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="saveadd2" v-if="isNewData2">确 定</el-button>
                        <el-button type="primary" @click="saveEdit2" v-else>确 定</el-button>
                    </span>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
import {
    FindWorkflowReal,
    AddWorkFlowReal,
    EditOneWorkFlowReal,
    DeleteOneWorkFlowReal
} from '../../../api/module/dataClassification/wellSementConstruction/work_flow_real';

import {
    FindCementsluryReal,
    AddCementsluryReal,
    EditOneCementsluryReal,
    DeleteCementsluryReal
} from '../../../api/module/dataClassification/wellSementConstruction/slurryActual/cementslury_real';
import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel';
import { ListDataDictByCondition } from '../../../api/module/dataClassification/data_classification';

import { FindWorkDescription, SaveWorkDescription } from '../../../api/module/dataClassification/Cement/WorkDescription';
export default {
    data() {
        return {
            wellstructureid: localStorage.getItem('wellstructureid'),
            tableHeight: localStorage.getItem('tableHeight'),
            rowStyle: { height: '30px' },
            cellStyle: {
                padding: 0
            },

            editVisible1: false,
            isNewData1: false,
            editVisible2: false,
            isNewData2: false,

            Data: {},

            tableData: [{}],

            Continuous_Select: [], //施工连续性
            cementcategory_Select: [], //水泥类别
            //查询参数
            searchModel: {
                //查询部分默认的绑定值
                wellName: localStorage.getItem('wellname') //井名
                // wellType: '', //井型
                // wellCategory: '', //井别
                // startDrillDate: '', //开钻日期
                // endDrillDate: '', //完钻日期
                // currentPage: 1, //当前页
                // pageSize: 10 //页大小
            },
            condition: {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            },

            findform1: {
                bitsize: localStorage.getItem('bitsize'),
                bumppressure: '',
                caselevel: '',
                casesize: localStorage.getItem('casesize'),
                ontinuous: '',
                leakage: '',
                no: localStorage.getItem('no'),
                remedy: '',
                wellname: localStorage.getItem('wellname'),
                workdescriptionid: null
            },

            pageIdx1: 1,
            pageSizes1: 10,
            totalData1: 0,
            currentPage1: 1,

            pageIdx2: 1,
            pageSizes2: 10,

            totalData2: 0,
            currentPage2: 1,

            //实际施工参数数据表
            tableData1: [{}],
            form1: {},
            //实际水泥浆数据表
            tableData2: [{}],
            form2: {}
        };
    },
    created() {
        this.WorkflowRealFind(); //创建时查询实际施工参数表格数据
        this.CementsluryRealFind(); //同上，

        this.GetAllSelect();

        this.FindWorkDescription();
    },
    methods: {
        download1() {
            downTemplateExcel('WorkFLowReal').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '实际施工数据模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },

        download2() {
            downTemplateExcel('CementSluryReal').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '水泥浆实际数据模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },

        GetAllSelect() {
            ListDataDictByCondition('施工连续性').then((res) => {
                // console.log('下拉列表获取成功')
                this.Continuous_Select = res.data;
            });

            ListDataDictByCondition('水泥类别').then((res) => {
                // console.log('下拉列表获取成功')
                this.cementcategory_Select = res.data;
            });
        },

        FindWorkDescription() {
            FindWorkDescription(this.wellstructureid)
                .then((res) => {
                    console.log('施工结果查询成功');

                    if (res.data != null) {
                        this.findform1 = res.data;
                    }

                    console.log(res);
                })
                .catch((err) => {
                    console.log('施工结果查询失败');
                    console.log(err);
                });
        },
        ImportCementSluryReal(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'CementSluryReal') //传入导入表的名称
                .then((res) => {
                    console.log('导入成功');
                    console.log(res);
                    this.CementsluryRealFind(); //查询该表
                    loading.close()
                    this.$message.success("数据导入成功")
                }).catch(err=>{
                    loading.close()
                    this.$message.warning("数据导入失败")
                });
        },

        ImportWorkFLowReal(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'WorkFLowReal') //传入导入表的名称
                .then((res) => {
                    console.log('导入成功');
                    console.log(res);
                    this.WorkflowRealFind(); //查询该表
                    loading.close()
                    this.$message.success("数据导入成功")
                }).catch(err=>{
                    loading.close()
                    this.$message.warning("数据导入失败")
                });
        },
        WorkflowRealFind() {
            console.log('井名：：：：');
            console.log(this.searchModel.wellName);
            FindWorkflowReal(this.currentPage1, this.pageSizes1, this.condition).then((res) => {
                console.log('实际施工参数数据查询接口调用成功参数');
                console.log(res);
                this.tableData1 = res.data.records;
                this.totalData1 = res.data.total;
            });
        },
        CementsluryRealFind() {
            FindCementsluryReal(this.condition.wellName, this.currentPage2, this.pageSizes2, this.condition).then((res) => {
                console.log('水泥浆数据查询接口调用成功参数');
                console.log(res);
                this.tableData2 = res.data.records;
                this.totalData2 = res.data.total;
            });
        },

        addone1() {
            this.editVisible1 = true;
            this.isNewData1 = true;
            this.form1 = {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            };
        },
        addone2() {
            this.editVisible2 = true;
            this.isNewData2 = true;
            this.form2 = {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            };
        },
        saveadd1() {
            AddWorkFlowReal(this.form1)
                .then((res) => {
                    console.log('新增实际施工参数成功123');
                    this.$message.success('新增数据成功！');
                    this.WorkflowRealFind();
                    this.editVisible1 = false;
                })
                .catch((err) => {
                    console.log('新增实际施工参数失败123');
                });
        },
        saveadd2() {
            AddCementsluryReal(this.form2)
                .then((res) => {
                    console.log('新增水泥浆成功123');
                    this.$message.success('新增数据成功！');
                    this.CementsluryRealFind();
                    this.editVisible2 = false;
                })
                .catch((err) => {
                    console.log('新增水泥浆失败123');
                });
        },
        formSave1() {
            SaveWorkDescription(this.wellstructureid, this.findform1)
                .then((res) => {
                    console.log('保存施工结果成功');
                    this.$message.success('保存数据成功！');
                    console.log(res);
                })
                .catch((err) => {
                    console.log('保存施工结果失败');
                    console.log(err);
                });
        },
        handleEdit1(index, row) {
            this.editVisible1 = true;
            this.isNewData1 = false;
            this.form1 = row;
        },
        handleEdit2(index, row) {
            this.editVisible2 = true;
            this.isNewData2 = false;
            this.form2 = row;
        },
        saveEdit1() {
            EditOneWorkFlowReal(this.form1)
                .then((res) => {
                    console.log('编辑实际施工参数成功');
                    this.$message.success('编辑数据成功！');
                    this.editVisible1 = false;
                })
                .catch((err) => {});
        },
        saveEdit2() {
            EditOneCementsluryReal(this.form2)
                .then((res) => {
                    console.log('编辑水泥浆real成功');
                    this.$message.success('编辑数据成功！');
                    this.editVisible2 = false;
                })
                .catch((err) => {});
        },

        deleteone1(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                DeleteOneWorkFlowReal(row.workflowrealid)
                    .then((res) => {
                        console.log('删除实际施工参数接口调用成功123');
                        this.$message.success('删除数据成功！');
                        this.WorkflowRealFind(); //查询
                    })
                    .catch((err) => {
                        console.log('删除实际施工参数接口调用失败123');
                    });
            });
        },
        deleteone2(index, row) {
            console.log('row');
            console.log(row);
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                console.log(row.cementsluryrealid);
                DeleteCementsluryReal(row.cementsluryrealid)
                    .then((res) => {
                        console.log('删除水泥浆接口调用成功123');
                        this.$message.success('删除数据成功！');
                        this.CementsluryRealFind();
                    })
                    .catch((err) => {
                        console.log('删除水泥浆接口调用失败123');
                    });
            });
        },
        handlePageChange1(page) {
            this.pageIdx1 = page;
            this.currentPage1 = page;
            this.WorkflowRealFind();
        },
        handlePageChange2(page) {
            this.pageIdx2 = page;
            this.currentPage2 = page;
            this.CementsluryRealFind();
        }
    }
};
</script>

<style scoped>
.card >>> .el-card__body {
    padding: 5px;
}
.card >>> .el-card__header {
    font-size: 17px;
    padding: 5px 10px;
    /* padding: 5px 10px !important; */
    height: 40px;
    line-height: 30px;
    background-color: #eef0f6;
}
.headstyle {
    height: 25px;
    font-size: 14px;
    padding: 5px 10px;
    background-color: hsl(225, 39%, 48%);
    color: white;
}
.dataform {
    width: 97%;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}

form {
    margin-top: 10px;
}
/* 利用穿透，设置input边框隐藏 */
.inputDeep >>> .el-input__inner {
    border: 0;
}

.inputstyle {
    margin-left: 13px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.upload-demo >>> .el-upload--text {
    width: 57px;
    height: 50px;
    border-radius: 0px;
    border: none;
    display: flex;
    align-items: center;
}
</style>
